<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岚小字识字系统 - 游戏巩固中心</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .app-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
        }

        .header h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 0 3px 6px rgba(0,0,0,0.3);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        .stats-panel {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .stat-card {
            text-align: center;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            animation: float 3s ease-in-out infinite;
        }

        .stat-card:nth-child(2) { animation-delay: -1s; }
        .stat-card:nth-child(3) { animation-delay: -2s; }
        .stat-card:nth-child(4) { animation-delay: -0.5s; }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }

        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .game-card {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 15px 50px rgba(0,0,0,0.1);
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .game-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s;
        }

        .game-card:hover::before {
            left: 100%;
        }

        .game-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 25px 80px rgba(0,0,0,0.15);
        }

        .game-icon {
            font-size: 3rem;
            margin-bottom: 15px;
            text-align: center;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .game-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 10px;
            text-align: center;
        }

        .game-desc {
            color: #666;
            text-align: center;
            margin-bottom: 15px;
            line-height: 1.6;
        }

        .game-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 12px;
            color: #888;
        }

        .difficulty-stars {
            display: flex;
            justify-content: center;
            gap: 3px;
            margin-bottom: 15px;
        }

        .star {
            color: #ffd700;
            font-size: 16px;
        }

        .star.empty {
            color: #ddd;
        }

        .play-btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .play-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 154, 158, 0.4);
        }

        /* 游戏界面 */
        .game-interface {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .game-content {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 800px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }

        .game-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .close-btn {
            background: #ff6b6b;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .close-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
        }

        .game-area {
            min-height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* 翻牌记忆游戏 */
        .memory-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            max-width: 400px;
        }

        .memory-card {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            transform-style: preserve-3d;
        }

        .memory-card.flipped {
            background: white;
            border: 2px solid #667eea;
            transform: rotateY(180deg);
        }

        .memory-card.matched {
            background: #48bb78;
            cursor: default;
        }

        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            border-radius: 10px;
        }

        .card-back {
            transform: rotateY(180deg);
            background: white;
            color: #2d3748;
        }

        /* 连连看游戏 */
        .match-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
            max-width: 480px;
        }

        .match-item {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1.2rem;
            font-weight: bold;
            color: white;
        }

        .match-item:hover {
            transform: scale(1.1);
        }

        .match-item.selected {
            background: #667eea;
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
        }

        .match-item.matched {
            background: #48bb78;
            cursor: default;
        }

        /* 快速识字游戏 */
        .speed-game {
            text-align: center;
        }

        .speed-char {
            font-size: 5rem;
            font-weight: bold;
            color: #2d3748;
            margin: 30px 0;
            animation: zoomIn 0.5s ease-out;
        }

        @keyframes zoomIn {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .speed-options {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            max-width: 400px;
            margin: 0 auto;
        }

        .speed-option {
            padding: 15px 25px;
            background: #f7fafc;
            border: 2px solid #e2e8f0;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 16px;
            font-weight: 500;
        }

        .speed-option:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .speed-option.correct {
            background: #48bb78;
            color: white;
            border-color: #48bb78;
        }

        .speed-option.wrong {
            background: #ff6b6b;
            color: white;
            border-color: #ff6b6b;
        }

        .game-timer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 15px;
            background: #f7fafc;
            border-radius: 10px;
        }

        .timer-item {
            text-align: center;
        }

        .timer-label {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }

        .timer-value {
            font-size: 18px;
            font-weight: bold;
            color: #2d3748;
        }

        .game-controls {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 20px;
        }

        .control-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-primary { background: #667eea; color: white; }
        .btn-success { background: #48bb78; color: white; }
        .btn-warning { background: #ed8936; color: white; }
        .btn-secondary { background: #e2e8f0; color: #4a5568; }

        .control-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .games-grid {
                grid-template-columns: 1fr;
            }
            
            .memory-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .match-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .speed-options {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部 -->
        <div class="header">
            <h1>🎮 游戏巩固中心</h1>
            <p>岚小字识字系统 - 寓教于乐，巩固学习成果</p>
        </div>

        <!-- 统计面板 -->
        <div class="stats-panel">
            <div class="stat-card">
                <div class="stat-number" id="total-games">5</div>
                <div class="stat-label">游戏总数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="played-count">0</div>
                <div class="stat-label">已玩次数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="best-score">0</div>
                <div class="stat-label">最高得分</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="accuracy-rate">0%</div>
                <div class="stat-label">正确率</div>
            </div>
        </div>

        <!-- 游戏卡片区域 -->
        <div class="games-grid">
            <!-- 翻牌记忆游戏 -->
            <div class="game-card" onclick="startGame('memory')">
                <div class="game-icon">🧠</div>
                <div class="game-title">字根记忆翻牌</div>
                <div class="game-desc">翻开卡片，记住字根位置，找到相同的配对</div>
                <div class="game-stats">
                    <span>已玩: <span id="memory-played">0</span>次</span>
                    <span>最佳: <span id="memory-best">--</span></span>
                </div>
                <div class="difficulty-stars">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star empty">★</span>
                </div>
                <button class="play-btn">开始游戏</button>
            </div>

            <!-- 汉字连连看 -->
            <div class="game-card" onclick="startGame('match')">
                <div class="game-icon">🔗</div>
                <div class="game-title">汉字连连看</div>
                <div class="game-desc">找到相关的字根和汉字，连接配对消除</div>
                <div class="game-stats">
                    <span>已玩: <span id="match-played">0</span>次</span>
                    <span>最佳: <span id="match-best">--</span></span>
                </div>
                <div class="difficulty-stars">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                </div>
                <button class="play-btn">开始游戏</button>
            </div>

            <!-- 快速识字挑战 -->
            <div class="game-card" onclick="startGame('speed')">
                <div class="game-icon">⚡</div>
                <div class="game-title">快速识字挑战</div>
                <div class="game-desc">限时选择正确的读音，考验反应速度</div>
                <div class="game-stats">
                    <span>已玩: <span id="speed-played">0</span>次</span>
                    <span>最佳: <span id="speed-best">--</span></span>
                </div>
                <div class="difficulty-stars">
                    <span class="star">★</span>
                    <span class="star empty">★</span>
                    <span class="star empty">★</span>
                </div>
                <button class="play-btn">开始游戏</button>
            </div>

            <!-- 字根拼图 -->
            <div class="game-card" onclick="startGame('puzzle')">
                <div class="game-icon">🧩</div>
                <div class="game-title">字根拼图</div>
                <div class="game-desc">将分散的字根部件拼成完整汉字</div>
                <div class="game-stats">
                    <span>已玩: <span id="puzzle-played">0</span>次</span>
                    <span>最佳: <span id="puzzle-best">--</span></span>
                </div>
                <div class="difficulty-stars">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                </div>
                <button class="play-btn">开始游戏</button>
            </div>

            <!-- 汉字消除 -->
            <div class="game-card" onclick="startGame('eliminate')">
                <div class="game-icon">💥</div>
                <div class="game-title">汉字消除</div>
                <div class="game-desc">点击相同字根组成的汉字，消除得分</div>
                <div class="game-stats">
                    <span>已玩: <span id="eliminate-played">0</span>次</span>
                    <span>最佳: <span id="eliminate-best">--</span></span>
                </div>
                <div class="difficulty-stars">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star empty">★</span>
                </div>
                <button class="play-btn">开始游戏</button>
            </div>

            <!-- 字根射击 -->
            <div class="game-card" onclick="startGame('shoot')">
                <div class="game-icon">🎯</div>
                <div class="game-title">字根射击</div>
                <div class="game-desc">射击正确的字根，组成目标汉字</div>
                <div class="game-stats">
                    <span>已玩: <span id="shoot-played">0</span>次</span>
                    <span>最佳: <span id="shoot-best">--</span></span>
                </div>
                <div class="difficulty-stars">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                </div>
                <button class="play-btn">开始游戏</button>
            </div>
        </div>
    </div>

    <!-- 游戏界面弹窗 -->
    <div class="game-interface" id="game-interface">
        <div class="game-content">
            <div class="game-header">
                <h3 id="current-game-title">游戏标题</h3>
                <button class="close-btn" onclick="closeGame()">×</button>
            </div>

            <!-- 游戏计时器 -->
            <div class="game-timer">
                <div class="timer-item">
                    <div class="timer-label">得分</div>
                    <div class="timer-value" id="game-score">0</div>
                </div>
                <div class="timer-item">
                    <div class="timer-label">时间</div>
                    <div class="timer-value" id="game-time">00:00</div>
                </div>
                <div class="timer-item">
                    <div class="timer-label">关卡</div>
                    <div class="timer-value" id="game-level">1</div>
                </div>
            </div>

            <!-- 游戏区域 -->
            <div class="game-area" id="game-area">
                <!-- 游戏内容将动态加载 -->
            </div>

            <!-- 游戏控制 -->
            <div class="game-controls">
                <button class="control-btn btn-primary" onclick="pauseGame()">⏸️ 暂停</button>
                <button class="control-btn btn-warning" onclick="restartGame()">🔄 重新开始</button>
                <button class="control-btn btn-success" onclick="nextLevel()">⏭️ 下一关</button>
                <button class="control-btn btn-secondary" onclick="closeGame()">🚪 退出游戏</button>
            </div>
        </div>
    </div>

    <script>
        // 游戏数据
        let gameData = {
            zigens: ['土', '也', '皮', '支', '水', '火', '木', '白', '干', '田', '口', '人', '大', '小', '山', '日'],
            compounds: {
                '土也': '地', '皮支': '坡', '水田': '池', '火白': '的',
                '木白干': '柏', '水白也': '泊', '火木田': '焦'
            },
            pinyinMap: {
                '土': 'tǔ', '也': 'yě', '皮': 'pí', '支': 'zhī',
                '水': 'shuǐ', '火': 'huǒ', '木': 'mù', '白': 'bái',
                '干': 'gān', '田': 'tián', '口': 'kǒu', '人': 'rén',
                '地': 'dì', '坡': 'pō', '池': 'chí', '的': 'de',
                '柏': 'bǎi', '泊': 'bó', '焦': 'jiāo'
            }
        };

        // 游戏状态
        let currentGame = null;
        let gameTimer = null;
        let gameStats = {
            score: 0,
            time: 0,
            level: 1,
            totalPlayed: 0,
            bestScore: 0,
            accuracy: 0
        };

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadGameStats();
            updateStatsDisplay();
        });

        // 加载游戏统计
        function loadGameStats() {
            const saved = localStorage.getItem('ziGenGameStats');
            if (saved) {
                const stats = JSON.parse(saved);
                Object.assign(gameStats, stats);
            }
        }

        // 保存游戏统计
        function saveGameStats() {
            localStorage.setItem('ziGenGameStats', JSON.stringify(gameStats));
        }

        // 更新统计显示
        function updateStatsDisplay() {
            document.getElementById('total-games').textContent = '6';
            document.getElementById('played-count').textContent = gameStats.totalPlayed;
            document.getElementById('best-score').textContent = gameStats.bestScore;
            document.getElementById('accuracy-rate').textContent = gameStats.accuracy + '%';
        }

        // 开始游戏
        function startGame(gameType) {
            currentGame = gameType;
            document.getElementById('game-interface').style.display = 'flex';
            
            // 重置游戏状态
            gameStats.score = 0;
            gameStats.time = 0;
            gameStats.level = 1;
            updateGameUI();

            // 根据游戏类型加载内容
            switch(gameType) {
                case 'memory':
                    loadMemoryGame();
                    document.getElementById('current-game-title').textContent = '🧠 字根记忆翻牌';
                    break;
                case 'match':
                    loadMatchGame();
                    document.getElementById('current-game-title').textContent = '🔗 汉字连连看';
                    break;
                case 'speed':
                    loadSpeedGame();
                    document.getElementById('current-game-title').textContent = '⚡ 快速识字挑战';
                    break;
                case 'puzzle':
                    loadPuzzleGame();
                    document.getElementById('current-game-title').textContent = '🧩 字根拼图';
                    break;
                case 'eliminate':
                    loadEliminateGame();
                    document.getElementById('current-game-title').textContent = '💥 汉字消除';
                    break;
                case 'shoot':
                    loadShootGame();
                    document.getElementById('current-game-title').textContent = '🎯 字根射击';
                    break;
            }

            // 开始计时
            startTimer();
        }

        // 关闭游戏
        function closeGame() {
            document.getElementById('game-interface').style.display = 'none';
            stopTimer();
            currentGame = null;
            
            // 更新统计
            gameStats.totalPlayed++;
            if (gameStats.score > gameStats.bestScore) {
                gameStats.bestScore = gameStats.score;
            }
            saveGameStats();
            updateStatsDisplay();
        }

        // 更新游戏界面
        function updateGameUI() {
            document.getElementById('game-score').textContent = gameStats.score;
            document.getElementById('game-level').textContent = gameStats.level;
            
            const minutes = Math.floor(gameStats.time / 60);
            const seconds = gameStats.time % 60;
            document.getElementById('game-time').textContent = 
                `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }

        // 开始计时
        function startTimer() {
            gameTimer = setInterval(() => {
                gameStats.time++;
                updateGameUI();
            }, 1000);
        }

        // 停止计时
        function stopTimer() {
            if (gameTimer) {
                clearInterval(gameTimer);
                gameTimer = null;
            }
        }

        // 翻牌记忆游戏
        function loadMemoryGame() {
            const gameArea = document.getElementById('game-area');
            const chars = gameData.zigens.slice(0, 8); // 取8个字根
            const cards = [...chars, ...chars].sort(() => Math.random() - 0.5); // 配对并打乱
            
            gameArea.innerHTML = `
                <div class="memory-grid">
                    ${cards.map((char, index) => `
                        <div class="memory-card" data-char="${char}" data-index="${index}" onclick="flipCard(this)">
                            <div class="card-front">?</div>
                            <div class="card-back">${char}</div>
                        </div>
                    `).join('')}
                </div>
            `;
        }

        let flippedCards = [];
        let matchedPairs = 0;

        function flipCard(card) {
            if (card.classList.contains('flipped') || card.classList.contains('matched')) return;
            if (flippedCards.length >= 2) return;

            card.classList.add('flipped');
            flippedCards.push(card);

            if (flippedCards.length === 2) {
                setTimeout(() => {
                    const [card1, card2] = flippedCards;
                    if (card1.dataset.char === card2.dataset.char) {
                        card1.classList.add('matched');
                        card2.classList.add('matched');
                        matchedPairs++;
                        gameStats.score += 10;
                        
                        if (matchedPairs === 8) {
                            alert('🎉 恭喜通关！');
                            nextLevel();
                        }
                    } else {
                        card1.classList.remove('flipped');
                        card2.classList.remove('flipped');
                    }
                    flippedCards = [];
                    updateGameUI();
                }, 1000);
            }
        }

        // 连连看游戏
        function loadMatchGame() {
            const gameArea = document.getElementById('game-area');
            const pairs = [
                ['土', '地'], ['也', 'yě'], ['皮', 'pí'], ['支', 'zhī'],
                ['水', '池'], ['火', '的'], ['木', 'mù'], ['白', 'bái']
            ];
            const items = pairs.flat().sort(() => Math.random() - 0.5);
            
            gameArea.innerHTML = `
                <div class="match-grid">
                    ${items.map((item, index) => `
                        <div class="match-item" data-item="${item}" data-index="${index}" onclick="selectMatch(this)">
                            ${item}
                        </div>
                    `).join('')}
                </div>
            `;
        }

        let selectedMatch = null;

        function selectMatch(item) {
            if (item.classList.contains('matched')) return;

            if (selectedMatch) {
                selectedMatch.classList.remove('selected');
                
                if (isMatchPair(selectedMatch.dataset.item, item.dataset.item)) {
                    selectedMatch.classList.add('matched');
                    item.classList.add('matched');
                    gameStats.score += 15;
                    
                    const remaining = document.querySelectorAll('.match-item:not(.matched)').length;
                    if (remaining === 0) {
                        alert('🎉 恭喜通关！');
                        nextLevel();
                    }
                } else {
                    // 错误配对的视觉反馈
                    item.style.background = '#ff6b6b';
                    setTimeout(() => {
                        item.style.background = '';
                    }, 500);
                }
                selectedMatch = null;
            } else {
                selectedMatch = item;
                item.classList.add('selected');
            }
            updateGameUI();
        }

        function isMatchPair(item1, item2) {
            const pairs = [
                ['土', '地'], ['也', 'yě'], ['皮', 'pí'], ['支', 'zhī'],
                ['水', '池'], ['火', '的'], ['木', 'mù'], ['白', 'bái']
            ];
            
            return pairs.some(pair => 
                (pair[0] === item1 && pair[1] === item2) || 
                (pair[0] === item2 && pair[1] === item1)
            );
        }

        // 快速识字游戏
        function loadSpeedGame() {
            generateSpeedQuestion();
        }

        function generateSpeedQuestion() {
            const gameArea = document.getElementById('game-area');
            const char = gameData.zigens[Math.floor(Math.random() * gameData.zigens.length)];
            const correctPinyin = gameData.pinyinMap[char];
            
            // 生成错误选项
            const allPinyins = Object.values(gameData.pinyinMap);
            const wrongOptions = allPinyins.filter(p => p !== correctPinyin).slice(0, 3);
            const options = [correctPinyin, ...wrongOptions].sort(() => Math.random() - 0.5);
            
            gameArea.innerHTML = `
                <div class="speed-game">
                    <div class="speed-char">${char}</div>
                    <div class="speed-options">
                        ${options.map(option => `
                            <div class="speed-option" onclick="checkSpeedAnswer('${option}', '${correctPinyin}')">
                                ${option}
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
        }

        function checkSpeedAnswer(selected, correct) {
            const options = document.querySelectorAll('.speed-option');
            options.forEach(option => {
                if (option.textContent === selected) {
                    if (selected === correct) {
                        option.classList.add('correct');
                        gameStats.score += 5;
                    } else {
                        option.classList.add('wrong');
                    }
                } else if (option.textContent === correct) {
                    option.classList.add('correct');
                }
                option.style.pointerEvents = 'none';
            });

            updateGameUI();
            setTimeout(generateSpeedQuestion, 1500);
        }

        // 其他游戏加载函数
        function loadPuzzleGame() {
            const gameArea = document.getElementById('game-area');
            gameArea.innerHTML = `
                <div style="text-align: center; padding: 50px;">
                    <h3>🧩 字根拼图</h3>
                    <p>将分散的字根拖拽组合成完整汉字</p>
                    <div style="margin: 30px 0;">
                        <div style="font-size: 3rem; margin: 20px;">目标：地</div>
                        <div style="display: flex; gap: 20px; justify-content: center;">
                            <div style="padding: 20px; background: #f0f0f0; border-radius: 10px; cursor: move;">土</div>
                            <div style="padding: 20px; background: #f0f0f0; border-radius: 10px; cursor: move;">也</div>
                        </div>
                    </div>
                    <button class="control-btn btn-primary" onclick="gameStats.score += 20; updateGameUI(); alert('拼图成功！')">完成拼图</button>
                </div>
            `;
        }

        function loadEliminateGame() {
            const gameArea = document.getElementById('game-area');
            gameArea.innerHTML = `
                <div style="text-align: center; padding: 50px;">
                    <h3>💥 汉字消除</h3>
                    <p>点击相同字根组成的汉字进行消除</p>
                    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; max-width: 300px; margin: 30px auto;">
                        ${['地', '坡', '池', '的', '地', '坡', '池', '的'].map(char => `
                            <div style="padding: 20px; background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); 
                                        color: white; border-radius: 10px; cursor: pointer; font-size: 1.5rem; font-weight: bold;"
                                 onclick="eliminateChar(this)">${char}</div>
                        `).join('')}
                    </div>
                </div>
            `;
        }

        function eliminateChar(element) {
            element.style.animation = 'zoomIn 0.3s reverse';
            setTimeout(() => {
                element.style.visibility = 'hidden';
                gameStats.score += 8;
                updateGameUI();
            }, 300);
        }

        function loadShootGame() {
            const gameArea = document.getElementById('game-area');
            gameArea.innerHTML = `
                <div style="text-align: center; padding: 50px;">
                    <h3>🎯 字根射击</h3>
                    <p>射击正确的字根组成目标汉字</p>
                    <div style="margin: 30px 0;">
                        <div style="font-size: 2rem; margin-bottom: 20px;">目标：地</div>
                        <div style="display: flex; gap: 20px; justify-content: center; margin: 20px 0;">
                            ${['土', '也', '皮', '支'].map(char => `
                                <div style="padding: 15px; background: #667eea; color: white; border-radius: 50%; 
                                            cursor: crosshair; font-size: 1.2rem; font-weight: bold;"
                                     onclick="shootChar('${char}')">${char}</div>
                            `).join('')}
                        </div>
                        <div style="font-size: 1.5rem; color: #666;">已射击：<span id="shot-chars"></span></div>
                    </div>
                </div>
            `;
        }

        let shotChars = [];

        function shootChar(char) {
            shotChars.push(char);
            document.getElementById('shot-chars').textContent = shotChars.join(' + ');
            
            if (shotChars.join('') === '土也') {
                alert('🎯 射击成功！组成了"地"字！');
                gameStats.score += 25;
                updateGameUI();
                shotChars = [];
                document.getElementById('shot-chars').textContent = '';
            } else if (shotChars.length >= 2) {
                alert('❌ 射击错误，重新开始！');
                shotChars = [];
                document.getElementById('shot-chars').textContent = '';
            }
        }

        // 游戏控制函数
        function pauseGame() {
            if (gameTimer) {
                stopTimer();
                alert('⏸️ 游戏已暂停');
            } else {
                startTimer();
                alert('▶️ 游戏继续');
            }
        }

        function restartGame() {
            if (confirm('确定要重新开始当前游戏吗？')) {
                gameStats.score = 0;
                gameStats.time = 0;
                gameStats.level = 1;
                matchedPairs = 0;
                flippedCards = [];
                selectedMatch = null;
                shotChars = [];
                updateGameUI();
                startGame(currentGame);
            }
        }

        function nextLevel() {
            gameStats.level++;
            gameStats.score += 50; // 过关奖励
            updateGameUI();
            alert('🎉 进入下一关！');
            startGame(currentGame);
        }
    </script>
</body>
</html> 